<template>
	<view class="detail">
		<view class="topBox" style="background-color: #000000;">
			<image :src="pageData.image" mode="aspectFit" style="width: 100%; height: 100%;"></image>
			<view v-if="buyFlg==0" class="zz">
				未开始
			</view>
			<view v-if="buyFlg==1" class="zz"
				style="display: flex;align-items: center;padding-left: 30rpx;box-sizing: border-box;">
				倒计时： <u-count-down :time="time" format="HH:mm:ss" @finish="finishTime"></u-count-down>
			</view>
			<view v-if="buyFlg==2" class="zz">
				已开始
			</view>
		</view>

		<view class="message">
			<view class="name">
				{{pageData.name}}
			</view>
			<view class="messageBottom">
				<view class="price">
					￥{{pageData.all_price}}
				</view>
				<!-- <view class="messageBottomrighr">
					<view class="" style="margin-right: 34rpx;">
						已售：{{pageData.sold_count}}
					</view>
					<view class="">
						存库：{{pageData.stock}}
					</view>
				</view> -->

			</view>
			<view class="maijia">
				<view class="maijiatext">
					寄售家
				</view>
				<view class="maijianame">
					{{pageData.sell_userinfo.nickname}}<!-- 15512345678 -->
				</view>
			</view>

		</view>

		<view class="contentBox">
			<view class="title" style="margin-bottom: 30rpx;">
				图片详情
			</view>
			<view class="" style="margin-top: 30rpx;width: 100%; text-align: center;background-color: #000000;">
				<image v-for="(item,index) in this.pageData.goods_detail" :src="item" mode="aspectFit"
					@click="handleImg"></image>
			</view>
		</view>

		<view class="" style="height: 100rpx;"></view>

		<view class="bottomContent">
			<view class="bottomContentLeft" @click="shareFlag = true">
				<image src="@/static/image/fx.png" mode="" style="width: 68rpx; height: 68rpx;"></image>
				<view class="text">
					分享
				</view>
			</view>
			<view class="btns" @click="handlePm">
				立即抢购
			</view>
		</view>


		<u-popup :show="shareFlag" mode="bottom" :round="20" bgColor="transparent" @close="shareFlag = false">
			<view class="shareBox">
				<view class="title">
					立即分享
				</view>

				<view class="typeBox">
					<view class="typeitem" @click="handleSareWx">
						<image src="../../static/image/wx.png" mode="" style="width: 80rpx; height: 80rpx;"></image>
						<view class="">
							微信
						</view>
					</view>
					<view class="typeitem" @click="jietufexiang">
						<image src="../../static/image/pyq.png" mode="" style="width: 80rpx; height: 80rpx;"></image>
						<view class="">
							朋友圈
						</view>
					</view>
				</view>

				<view class="btn" @click="shareFlag = false">
					取消
				</view>

			</view>
		</u-popup>

		<u-popup :show="auctionFlag" mode="bottom" :round="20" bgColor="transparent" @close="auctionFlag = false">
			<view class="auctionBox">
				<view class="price">
					￥{{pageData.all_price}}
				</view>
				<!-- <view class="text">
					最低加价金额 ￥{{pageData.add_price}}
				</view> -->
				<view class="text">
					抢购金额 ￥{{qipai}}
				</view>

				<view class="inputBox">
					<view class="icon">
						￥
					</view>
					<input type="number" name="" v-model="qipai" id="" :placeholder="'起拍金额￥' + qipai" :disabled="true">
				</view>
				<view class="zhu">
					注：出价仅可出整数金额
				</view>
				<view class="btns" @click="$u.debounce(handlecreateorder, 500)">
					确定
				</view>

			</view>
		</u-popup>

	</view>
</template>

<script>
	var graceRichText = require("../../static/richText.js");
	import {
		goodsDetail,
		createorder,
		getsettings
	} from "@/api/api.js"
	export default {
		data() {
			return {
				shareFlag: false,
				auctionFlag: false,
				pageId: null,
				pageData: {},
				qipai: null,
				changciFlag: null,
				buyFlg: true,
				shi: null,
				fen: null,
				miao: null,
				time: null,
				payTypeflag: false,
				buyFlg: null, // 0未开始  1倒计时  2可以购买
			}
		},
		onLoad(options) {
			if (!uni.getStorageSync("token")) {
				uni.reLaunch({
					url: "../login/index"
				})
				return
			}
			console.log("options", options)
			this.pageId = JSON.parse(options.detail).id
			this.buyFlg = JSON.parse(options.detail).buyFlg
			var changciChuo = JSON.parse(options.detail).changciChuo
			this.currentChuo = new Date().getTime()
			this.time = changciChuo - this.currentChuo
			console.log("buyFlg", this.buyFlg)
			this.handleGetGoodsdetail()
		},
		methods: {
			handleImg() {
				uni.previewImage({
					urls: this.pageData.goods_detail, // 图片的链接列表
					current: 0, // 当前显示图片的链接索引
				});
			},
			finishTime() {
				console.log("倒计时结束3333333333")
				this.buyFlg = 2
			},
			async handleGetGoodsdetail() {
				let res = await goodsDetail({
					id: this.pageId
				})
				console.log("商品详情", res)
				this.pageData = res.data
				this.pageData.goods_detail = JSON.parse(this.pageData.goods_detail)
				this.qipai = this.pageData.min_price
			},

			handlePm() {
				if (this.buyFlg == 0) {
					uni.showToast({
						title: "抢购暂未开始！",
						icon: "none",
						duration: 1500
					});
				} else {
					this.auctionFlag = true
				}
			},
			async handlecreateorder() {
				let res = await createorder({
					shop_list_id: this.pageId
				})
				console.log("拍卖", res)
				if (res.code == 1000) {
					this.auctionFlag = false
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1800)
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500
					});
				}
			},
			//分享微信好友
			handleSareWx() {
				var weixinShare = null;
				plus.share.getServices(function(services) {
					for (var i in services) {
						var service = services[i];
						// 获取微信分享对象 
						if (service.id == 'weixin') {
							weixinShare = service;
							break;
						}
					}
					weixinShare.send({
						content: 'http://www.jinsekeji.com.cn/#/'
					}, function() {
						// 分享成功 
					}, function(err) {
						// 分享操作失败  
						// err.code是错误码
					})
				}, function(err) {
					// 获取 services 失败
				})

			},
			//分享朋友圈
			jietufexiang() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 1,
					summary: "http://www.jinsekeji.com.cn/#/",
					success: function(res) {
						// console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						// console.log("fail:" + JSON.stringify(err));
					}
				})
				return
				// this.capture();
				// var that = this;
				// setTimeout(() => {
				// 	uni.share({
				// 		provider: "weixin",
				// 		scene: "WXSenceTimeline", //朋友圈
				// 		type: 2,
				// 		href: " http://www.jinsekeji.com.cn/#/",
				// 		imageUrl: this.ppt,
				// 		success: function(res) {
				// 			console.log("success:" + JSON.stringify(res));
				// 		},
				// 		fail: function(err) {
				// 			console.log("fail:" + JSON.stringify(err));
				// 		}
				// 	});
				// }, 500)
			},

			capture: function(scene) {
				let _this = this;

				let pages = getCurrentPages();
				let page = pages[pages.length - 1];
				let bitmap = null;
				let currentWebview = page.$getAppWebview();
				bitmap = new plus.nativeObj.Bitmap('amway_img');
				// 将webview内容绘制到Bitmap对象中  
				currentWebview.draw(bitmap, function() {
					console.log('截屏绘制图片成功');
					// bitmap.save( "_doc/"+Math.random()+".jpg"
					bitmap.save("_doc/invite.jpg", {}, function(i) {
						console.log('保存图片成功：' + JSON.stringify(i));
						uni.saveImageToPhotosAlbum({
							filePath: i.target,
							success: function() {
								_this.path = i.target
								bitmap.clear(); //销毁Bitmap图片  

								_this.ppt = i.target

								console.log(_this.ppt);
							}
						});
					}, function(e) {
						console.log('保存图片失败：' + JSON.stringify(e));
					});
				}, function(e) {
					console.log('截屏绘制图片失败：' + JSON.stringify(e));
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.maijia {
		display: flex;
		height: 36rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		margin-top: 30rpx;

		.maijiatext {
			width: 100rpx;
			height: 36rpx;
			background: #359691;
			color: #ffffff;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 36rpx;
			text-align: center;
		}

		.maijianame {
			// width: 292rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #707070;
			line-height: 36rpx;
			text-align: center;
			border: 2rpx solid #359691;
		}
	}

	.detail {
		.topBox {
			width: 100%;
			height: 494rpx;
			position: relative;
			box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.302);

			.zz {
				position: absolute;
				bottom: 0;
				width: 418rpx;
				height: 64rpx;
				background: rgba(255, 255, 255, 0.6);
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 64rpx;
				text-align: center;
			}
		}

		.message {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			height: 178rpx;
			background: #FFFFFF;
			margin-top: 12rpx;

			.name {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 36rpx;
			}

			.messageBottom {
				display: flex;
				justify-content: space-between;
				margin-top: 24rpx;

				.price {
					font-size: 36rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 400;
					color: #359691;
					line-height: 28rpx;
				}

				.messageBottomrighr {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #A2A2A2;
					line-height: 28rpx;
					display: flex;
				}

			}
		}

		.InstructionsBox {
			width: 100%;
			padding: 30rpx 30rpx;
			box-sizing: border-box;
			height: 250rpx;
			background: #FFFFFF;
			margin-top: 14rpx;

			.title {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 28rpx;
			}

			.textBox {
				width: 690rpx;
				display: flex;
				justify-content: space-between;

				.item {
					width: 100rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 28rpx;
					text-align: center;
				}
			}
		}

		.contentBox {
			width: 100%;
			padding: 30rpx 30rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			margin-top: 14rpx;

			.title {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 28rpx;
			}
		}

		.bottomContent {
			width: 100%;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			padding: 26rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: constant(safe-area-inset-bottom);
			/* 兼容 iOS 设备 */
			padding-bottom: env(safe-area-inset-bottom);

			.bottomContentLeft {
				display: flex;
				align-items: center;

				.text {
					font-size: 36rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 400;
					color: #359691;
					line-height: 48rpx;
					margin-left: 16rpx;
				}
			}

			.btns {
				width: 480rpx;
				height: 80rpx;
				background: #359691;
				border-radius: 512rpx 512rpx 512rpx 512rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
			}
		}

		.shareBox {
			width: 100%;
			height: 395rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 32rpx;
			box-sizing: border-box;

			.title {
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 48rpx;
				width: 100%;
				text-align: center;
			}

			.typeBox {
				width: 480rpx;
				margin: 26rpx auto;
				display: flex;
				justify-content: space-between;

				.typeitem {
					width: 100rpx;
					text-align: center;
				}
			}

			.btn {
				width: 480rpx;
				height: 70rpx;
				background: #A2A2A2;
				border-radius: 512rpx 512rpx 512rpx 512rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 70rpx;
				text-align: center;
				margin: 0 auto;
				margin-top: 20rpx;
			}
		}

		.auctionBox {
			width: 100%;
			height: 514rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 32rpx;
			box-sizing: border-box;

			.typeBox {
				display: flex;
				justify-content: space-around;
				margin-top: 80rpx;

			}

			.title {
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 48rpx;
				width: 100%;
				text-align: center;
			}

			.price {
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 28rpx;
			}

			.text {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 28rpx;
				margin-top: 24rpx;
			}

			.inputBox {
				width: 690rpx;
				height: 80rpx;
				background: #EAEAEA;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				margin-top: 22rpx;
				padding: 26rpx 16rpx;
				box-sizing: border-box;
				display: flex;

				.icon {}

				input {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					line-height: 28rpx;
					margin-left: 24rpx;
				}
			}

			.zhu {
				width: 264rpx;
				height: 28rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #A2A2A2;
				line-height: 28rpx;
				margin-top: 16rpx;
			}

			.btns {
				width: 480rpx;
				height: 80rpx;
				background: red;
				border-radius: 512rpx 512rpx 512rpx 512rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
				margin: 0 auto;
				margin-top: 24rpx;
			}
		}

	}
</style>